<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>进度追踪</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#34D399',
                        secondary: '#06B6D4',
                        accent: '#F59E0B',
                        danger: '#EF4444',
                        success: '#10B981',
                        background: '#F8FAFC',
                        surface: '#FFFFFF'
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-background">
    <!-- Status Bar -->
    <div class="flex justify-between items-center px-4 py-2 text-xs text-gray-800">
        <span class="font-medium">9:41</span>
        <div class="flex items-center space-x-1">
            <i class="fas fa-signal text-xs"></i>
            <i class="fas fa-wifi text-xs"></i>
            <div class="w-6 h-3 border border-gray-800 rounded-sm">
                <div class="w-4 h-1.5 bg-green-500 rounded-sm mt-0.5 ml-0.5"></div>
            </div>
        </div>
    </div>

    <!-- Header -->
    <div class="bg-surface px-6 pt-4 pb-6">
        <div class="flex items-center justify-between mb-4">
            <h1 class="text-2xl font-bold text-gray-800">进度追踪</h1>
            <button class="p-2 bg-gray-100 rounded-full">
                <i class="fas fa-download text-gray-600"></i>
            </button>
        </div>
    </div>

    <!-- Main Content -->
    <div class="px-6 pb-20">
        <!-- Overview Stats -->
        <div class="grid grid-cols-2 gap-4 mb-6">
            <div class="bg-gradient-to-br from-primary to-success rounded-2xl p-4 text-white">
                <div class="text-center">
                    <i class="fas fa-fire text-2xl mb-2"></i>
                    <h3 class="text-2xl font-bold">23</h3>
                    <p class="text-sm text-green-100">当前连击</p>
                </div>
            </div>
            
            <div class="bg-gradient-to-br from-secondary to-blue-600 rounded-2xl p-4 text-white">
                <div class="text-center">
                    <i class="fas fa-trophy text-2xl mb-2"></i>
                    <h3 class="text-2xl font-bold">45</h3>
                    <p class="text-sm text-blue-100">最长连击</p>
                </div>
            </div>
        </div>

        <!-- Weekly Progress Chart -->
        <div class="bg-surface rounded-2xl p-6 mb-6 shadow-sm">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">本周进度</h3>
            
            <!-- Mock Chart -->
            <div class="flex items-end space-x-2 h-32 mb-4">
                <div class="flex-1 flex flex-col items-center">
                    <div class="w-full bg-primary rounded-t h-24"></div>
                    <span class="text-xs text-gray-600 mt-2">周一</span>
                </div>
                <div class="flex-1 flex flex-col items-center">
                    <div class="w-full bg-primary rounded-t h-20"></div>
                    <span class="text-xs text-gray-600 mt-2">周二</span>
                </div>
                <div class="flex-1 flex flex-col items-center">
                    <div class="w-full bg-primary rounded-t h-28"></div>
                    <span class="text-xs text-gray-600 mt-2">周三</span>
                </div>
                <div class="flex-1 flex flex-col items-center">
                    <div class="w-full bg-primary rounded-t h-16"></div>
                    <span class="text-xs text-gray-600 mt-2">周四</span>
                </div>
                <div class="flex-1 flex flex-col items-center">
                    <div class="w-full bg-primary rounded-t h-32"></div>
                    <span class="text-xs text-gray-600 mt-2">周五</span>
                </div>
                <div class="flex-1 flex flex-col items-center">
                    <div class="w-full bg-gray-200 rounded-t h-8"></div>
                    <span class="text-xs text-gray-600 mt-2">周六</span>
                </div>
                <div class="flex-1 flex flex-col items-center">
                    <div class="w-full bg-gray-200 rounded-t h-8"></div>
                    <span class="text-xs text-gray-600 mt-2">周日</span>
                </div>
            </div>
            
            <div class="text-center">
                <p class="text-sm text-gray-600">本周完成率: <span class="font-semibold text-primary">71%</span></p>
            </div>
        </div>

        <!-- Achievement Progress -->
        <div class="bg-surface rounded-2xl p-6 mb-6 shadow-sm">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">成就进度</h3>
            
            <div class="space-y-4">
                <div class="flex items-center space-x-4">
                    <div class="w-12 h-12 bg-yellow-100 rounded-xl flex items-center justify-center">
                        <i class="fas fa-medal text-yellow-600 text-xl"></i>
                    </div>
                    <div class="flex-1">
                        <h4 class="font-semibold text-gray-800">30天挑战</h4>
                        <div class="flex items-center space-x-2 mt-1">
                            <div class="flex-1 bg-gray-200 rounded-full h-2">
                                <div class="bg-primary h-2 rounded-full" style="width: 77%"></div>
                            </div>
                            <span class="text-sm text-gray-600">23/30</span>
                        </div>
                    </div>
                </div>

                <div class="flex items-center space-x-4">
                    <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
                        <i class="fas fa-star text-blue-600 text-xl"></i>
                    </div>
                    <div class="flex-1">
                        <h4 class="font-semibold text-gray-800">社区贡献者</h4>
                        <div class="flex items-center space-x-2 mt-1">
                            <div class="flex-1 bg-gray-200 rounded-full h-2">
                                <div class="bg-secondary h-2 rounded-full" style="width: 60%"></div>
                            </div>
                            <span class="text-sm text-gray-600">6/10</span>
                        </div>
                    </div>
                </div>

                <div class="flex items-center space-x-4">
                    <div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center">
                        <i class="fas fa-book text-green-600 text-xl"></i>
                    </div>
                    <div class="flex-1">
                        <h4 class="font-semibold text-gray-800">学习达人</h4>
                        <div class="flex items-center space-x-2 mt-1">
                            <div class="flex-1 bg-gray-200 rounded-full h-2">
                                <div class="bg-green-500 h-2 rounded-full" style="width: 40%"></div>
                            </div>
                            <span class="text-sm text-gray-600">8/20</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Monthly Summary -->
        <div class="bg-surface rounded-2xl p-6 shadow-sm">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">本月总结</h3>
            
            <div class="grid grid-cols-3 gap-4 text-center">
                <div>
                    <div class="text-2xl font-bold text-primary">85%</div>
                    <div class="text-sm text-gray-600">成功率</div>
                </div>
                <div>
                    <div class="text-2xl font-bold text-secondary">12</div>
                    <div class="text-sm text-gray-600">学习天数</div>
                </div>
                <div>
                    <div class="text-2xl font-bold text-accent">156</div>
                    <div class="text-sm text-gray-600">经验值</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bottom Navigation -->
    <div class="fixed bottom-0 left-0 right-0 bg-surface border-t border-gray-100 px-6 py-3">
        <div class="flex justify-around items-center">
            <button class="flex flex-col items-center space-y-1">
                <i class="fas fa-home text-gray-400 text-lg"></i>
                <span class="text-xs text-gray-400">主页</span>
            </button>
            <button class="flex flex-col items-center space-y-1">
                <i class="fas fa-chart-line text-primary text-lg"></i>
                <span class="text-xs text-primary font-medium">进度</span>
            </button>
            <button class="flex flex-col items-center space-y-1">
                <i class="fas fa-users text-gray-400 text-lg"></i>
                <span class="text-xs text-gray-400">社区</span>
            </button>
            <button class="flex flex-col items-center space-y-1">
                <i class="fas fa-book text-gray-400 text-lg"></i>
                <span class="text-xs text-gray-400">学习</span>
            </button>
            <button class="flex flex-col items-center space-y-1">
                <i class="fas fa-user text-gray-400 text-lg"></i>
                <span class="text-xs text-gray-400">我的</span>
            </button>
        </div>
    </div>
</body>
</html> 